<!doctype html>
<html>
  <head>
    <title>Clarity</title>
    <style type="text/css">
        body {
            width: 280px;
            margin:0;
            background: #F3F3F3;
        }
        .clarity-logo-wrapper {
            margin: 0 auto;
        }
        .clarity-logo {
            margin: 20px auto;
            display: block;
            width: 200px;
            height: 28px;
        }

        /* Toggle Styles */
        .white {
            background: white;
            text-align: center;
            padding: 0 10px;

        }
        .white a {
            text-decoration: none;
            text-align: center;
        }
        .topborder {
            border-top: 1px solid #CCC;
        }
        .bottomborder {
            border-bottom: 1px solid #CCC;
        }
        .option {
            padding-left: 10px;
            font-family: Segoe UI, Arial, sans-serif;
            font-size: 14px;
            height: 40px;
            padding-top: 15px;
        }
       .toggleswitch {
            position: relative; width: 30px;
            -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
            float: right;
            margin-right: 10px;
            margin-top: 5px;
        }
        .toggleswitch-checkbox {
            display: none;
        }
        .toggleswitch-label {
            display: block; overflow: hidden; cursor: pointer;
            height: 14px; padding: 0; line-height: 14px;
            border: 0px solid #FFFFFF; border-radius: 20px;
            background-color: #9E9E9E;
        }
        .toggleswitch-label:before {
            content: "";
            display: block; width: 20px; margin: -3.5px;
            background: #F3F3F3;
            position: absolute; top: 0; bottom: 0;
            right: 20px;
            border-radius: 20px;
            box-shadow: 0 6px 12px 0px #757575;
        }
        .toggleswitch-checkbox:checked + .toggleswitch-label {
            background-color: #9E9E9E;
        }
        .toggleswitch-checkbox:checked + .toggleswitch-label, .toggleswitch-checkbox:checked + .toggleswitch-label:before {
        border-color: #CCC;
        }
        .toggleswitch-checkbox:checked + .toggleswitch-label .toggleswitch-inner {
            margin-left: 0;
        }
        .toggleswitch-checkbox:checked + .toggleswitch-label:before {
            right: 0px; 
            background-color: #DF4931; 
            box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
        }
    </style>
  </head>
  
<body onload="init">
	<div class="clarity-logo-wrapper">
        <img class="clarity-logo" src="" alt="Microsoft Clarity"></img>
    </div>
    <div id="menu">
        <div class="option white topborder bottomborder">
            Open developer tools to activate Clarity.
        </div>
        <div class="option">
            Show Text
            <div class="toggleswitch">
                <input type="checkbox" name="toggleswitch" class="toggleswitch-checkbox" id="showText">
                <label class="toggleswitch-label" for="showText"></label>
            </div>
        </div>
        <div class="option">
            Lean Mode
            <div class="toggleswitch">
                <input type="checkbox" name="toggleswitch" class="toggleswitch-checkbox" id="leanMode">
                <label class="toggleswitch-label" for="leanMode"></label>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>